import React from "react";
import {Animated, Dimensions, Easing, TouchableOpacity} from "react-native";
import {px} from "../utils/ScreenUtil";

const {width, height} = Dimensions.get('window');



export default class Tree extends React.Component {
  treeW = px(200);
  treeH = px(200);
  scaleH = px(250);
  state = {
    treeH: new Animated.Value(this.treeH),
  }

  _onPress = () => {
    console.log('_onPress')
    Animated.sequence([
      Animated.timing(this.state.treeH, {
        toValue: this.scaleH,
        duration: 200,
        easing: Easing.bezier(0.15, 0.73, 0.1, 1.2)
      }),
      Animated.timing(this.state.treeH, {
        toValue: this.treeH,
        duration: 300,
        easing: Easing.bezier(0.15, 1.2, 0.37, 1.2)
      }),
    ]).start();

  }

  render() {
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={this._onPress}
        style={{ position: 'absolute', right: width / 2 - this.treeW / 2, bottom: px(100),}}
      >
        <Animated.Image
          resizeMode={'stretch'}
          source={require('./tree.jpeg')}
          style={{
            height: this.state.treeH, width: this.treeW,
          }}
        />
      </TouchableOpacity>
    )
  }
}
